import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import Home from '../view/Home.vue'
// import Home from '@/view/Home.vue'

// 创建路由对象
const router = createRouter({
    history: createWebHistory(), // html模式
    // history: createWebHashHistory(), // hash模式，路径当中多了个#
    routes: [
        // {
        //     path: '/',
        //     component: Login组件
        // },
        {
            path: '/',
            redirect: '/home' // 重定向
        },
        {
            path: '/home',
            component: Home,
            children: [
                // 做用户管理、角色管理、菜单管理
                // 子路由
                {
                    // /home访问
                    path: '',
                    redirect: '/home/user' // 重定向
                    // component: () => import('@/components/User.vue')
                },
                {
                    // /home/user访问
                    path: 'user', // 不要加/开头
                    component: () => import('@/components/User.vue'),
                    children: [
                        {
                            // /home/user/detail/1
                            path: 'detail/:id',
                            // /home/user/2
                            // path: ':id',
                            component: () => import('@/components/UserDetail.vue'),
                            // 开启props传参
                            props: true
                        }
                    ]
                },
                {
                    path: 'role',
                    component: () => import('@/components/Role.vue'),
                    children: [
                        {
                            // /home/role/detail?id=1
                            path: 'detail',
                            component: () => import('@/components/RoleDetail.vue')
                        }
                    ]
                },
                {
                    path: 'menu',
                    component: () => import('@/components/Menu.vue')
                },
            ]
        },
        {
            path: '/about',
            component: () => import('@/view/About.vue')
        }
    ]
})

// 导出路由对象
export default router